<style scoped>

    .w-selectBar{
        background: transparent;
    }

</style>

<template>

    <!--地址弹窗-->
    <div  class="m-user" style=" width: 100%; height: 100%;position:fixed;top: 0;background:rgba(0,0,0,0.7);z-index: 11;" v-show="statusAddress">

    <div class="m-user-addrAdd">


        <div class="m-user-bar" style="padding-top:0">

            <div class="w-inputBar w-bar">
                <h1 style="font-size: .14rem;">
                    <template v-if="!!id">
                        修改地址
                    </template>
                    <template v-else>
                        新增地址
                    </template>
                </h1>
            </div>

            <a href="javascript:;" class="m-form-back" data-hide="#addressForm" data-show="#addressListPage" @click="this.$parent.statusAddress=false" style="color:#0fc977;position: fixed;right: 10px;top: 0;padding: 10px;font-size: 20px;line-height: 24px;">&times;</a>

            <div class="w-inputBar w-bar name" style="padding:0;padding-left: .05rem;">

                <div class="w-bar-control" style="border-right:1px solid #DCDCDC;">
                    <input placeholder="姓名" class="w-bar-input" type="text" name="name" maxlength="8" v-model="name">
                </div>
            </div>

            <div class="w-inputBar w-bar phone" style="padding:0;padding-left: .05rem;">

                <div class="w-bar-control">
                    <input placeholder="电话" class="w-bar-input"  pattern="/^1[3|4|5|7|8]\d{9}$/"  type="number" name="phone" v-model="phone" min="1"  max="11" >
                </div>
            </div>
            <div style="clear: both"></div>


            <div class="w-selectBar w-bar address-choose" style="padding:0;padding-left: .05rem;">
                <region-picker
                        :province.sync="province"
                        :city.sync="city"
                        :district.sync="district">
                </region-picker>
            </div>
            <div class="w-inputBar w-bar" style="padding:0;padding-left: .05rem;">
                <div class="w-bar-control ">
                    <textarea placeholder="请填写详细街道地址" v-model="address" class="w-bar-input" name="address"></textarea>
                </div>
            </div>


            <input v-if="!!id" type="hidden" name="addressId" v-model="id">

        </div>
        <div class="w-inputBar w-bar address-save" style="bottom: 0; border-radius: 0 0 .18rem .18rem;">
            <div class="w-bar-control address" style="height: .46rem;">
                <button type="submit" class="m-simpleHeader-ok" @click="addressChange" >保存</button>
            </div>
        </div>
    </div>
    </div>

    <pop :status-toast="statusToast" :msg="msg"></pop>
</template>

<script>
    import { RegionPicker } from 'vue-region-picker'
    import REGION_DATA from 'china-area-data'
    import pop from '../components/pop'
    import User from '../module/user'
    RegionPicker.region = REGION_DATA;

    module.exports = {

        props:{
            //地址id
            id:{
                type:String,
                default:''
            },

            //省
            province:{
                type:String,
                default:''
            },
            //市
            city:{
                type:String,
            },
            //区
            district:{
                type:String,
                default:''
            },
            //街道
            address:{
                type:String,
                default:''
            },
            phone:{
                type:String,
            },
            name:{

                type:String,
                default:''
            },
            //弹窗显示或隐藏
            statusAddress:{
                type:Boolean,
                default:false
            }

        },
        computed:{

        },
        data() {

            return {
                statusToast:false,
                msg:''
            }
        },

        components: {

            RegionPicker,
            pop

        },
        created(){

            this.$dispatch('isLoading', true);

        },
        ready() {

            this.$dispatch('isLoading', false);
        },
        beforeDestroy() {

        },

        route:{
            canReuse(transition){

                    return true;

            }

        },

        methods: {

            async addressChange(id){

                if(!this.province||!this.city||!this.address||!this.phone||!this.name){

                    this.msg = '信息不完整';
                    this.statusToast = true;
                    return;
                }

                let address = {

                    sheng:this.province,
                    shi:this.city,
                    xian:this.district,
                    jiedao:this.address,
                    mobile:this.phone,
                    shouhuoren:this.name,
                    id:this.id,
                    token:User.token

                }

                let res = {}

                if (!!this.id) {

                     res = await User.updateAddress(address)

                } else {

                     res = await User.addAddress(address)

                }

                if (res.status == 200) {

                    this.$parent.statusAddress = false;

                    this.$dispatch('updateAddressList',res.data.id)

                } else {

                    this.$dispatch('showError',true,res.msg);

                }

            },
            isPhone(val){

                return  /^1[3|4|5|7|8]\d{9}$/.test(val.trim())

            }

        },

    }
</script>
